<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M521.798086 543.293888c149.770748 0 271.746924-121.976177 271.746925-271.746925S671.568834 0 521.798086 0 250.051162 121.976177 250.051162 271.746924s121.976177 271.546963 271.746924 271.546964zM942.115993 775.248584c-19.396212-41.591877-46.990822-79.184534-81.983988-111.778168-70.386253-65.387229-164.567858-102.979887-258.14958-102.979887h-160.168717c-93.781683 0-187.763327 37.592658-258.14958 102.979887-34.993165 32.593634-62.587776 70.186292-81.983987 111.778168-20.396016 43.791447-30.793986 89.782464-30.793986 137.173209 0 61.587971 49.990236 111.578207 111.578207 111.578207h678.867409c61.587971 0 111.578207-49.990236 111.578208-111.578207-0.199961-47.390744-10.397969-93.581722-30.793986-137.173209z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
